<template>
  <div class="recruitment details-container">
    <CommonHead></CommonHead>
    <div class="clearfix recruitment-con">
      <div class="fl recruitment-le">
        <div class="title">寻找设计师</div>
        <div class="miaoshu">在最大的uimall平台上寻找世界上优秀的设计师</div>
        <ul class="recruitment-ul">
          <!-- 设计师列表 -->
          <li v-for="item in designersListArr" :key="item.id">
            <div class="sculpture-le clearfix recruitment-top">
              <div class="fl sculpture-img">
                <!-- 头像  -->
                <img :src="baseUrl + item.avatar" alt="" class="w100" />
                <!-- <img src="@/assets/img/1.png" alt=""> -->

                <div>
                  <p class="surname">{{ item.name }}</p>
                  <p class="name-position">{{ item.livenow }} | {{ item.profession }} <span> IP属地：{{ item.livenow
                  }}</span></p>
                </div>
              </div>
              <div class="fr overall-btn">
                <a :class="[isFocus ? 'active' : '', 'storp-a']" @click="handlePush(item.id)"><i
                    class="iconfont icon-shoucang"></i>{{ isFocus ? '取消关注' : '关注' }} </a>
              </div>
            </div>
            <div class="recruitment-bots">
              <div class="recruitment-lunbo">
                <swiper :slidesPerView="3" :space-between="30" :modules="modules" :navigation="true" :loop="true">
                  <!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 -->
                  <swiper-slide v-for="swiper in item.user_project" :key="swiper.id">
                    <!-- 循环轮播图里的图片 -->
                    <a> <img :src="baseUrl + swiper.image" /></a>
                  </swiper-slide>
                </swiper>
              </div>
              <div class="recruitment-a">
                <a class="seemore" @click="handlePush(item.id)">查看更多</a>
              </div>
            </div>
          </li>


        </ul>
        <div></div>
      </div>
      <div class="fr recruitment-re">
        <div class="search-boxss">
          <form>
            <ul>
              <li>
                <p>关键词搜索 </p>
                <input type="text" v-model="searchInput" />
              </li>
              <li>
                <p>地点</p>
                <select class="form-select" aria-label="--选择所在省市区--">
                  <option selected>--选择所在省市区--</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
              </li>
              <li>
                <p>工作经验</p>
                <div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" />
                    <label class="form-check-label" for="inlineCheckbox1">1-2年</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />
                    <label class="form-check-label" for="inlineCheckbox2">3-5年</label>
                  </div>
                  <br />
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" />
                    <label class="form-check-label" for="inlineCheckbox3">6-8年</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4" />
                    <label class="form-check-label" for="inlineCheckbox4">9年以上</label>
                  </div>
                </div>
              </li>
              <li>
                <p>当前角色</p>
                <input type="text" />
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
  </div>
</template>
 
<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper'
import { Navigation } from 'swiper'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import 'swiper/css'
import * as api from "@/api/users"
import useUsers from "@/store/users"

// 使用store的users的数据
let usersStore = useUsers()

export default {
 
  name: 'HelloWorld',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      modules: [Navigation, Pagination],
      // 设计师列表
      designersListArr: '',
      // 图片网址
      baseUrl: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      user_project: "",


      // 搜索双向绑定
      searchInput: "",

      isFocus: false,

    }
  },
  watch: {
    searchInput(newValue, oldValue) {
      // console.log(newValue, oldValue);
      this.getDesignerList(10, 1, this.searchInput)

    }
  },
  created() {
    // 调用设计师列表
    this.getDesignerList()

    // this.isFocusApi(1)
  },
  // mounted() {
  //   if (localStorage.getItem('isFocus' + this.$route.query.id)) {
  //     this.isFocus = localStorage.getItem('isFocus' + this.$route.query.id) === 'true'
  //   }
  // },
  methods: {
    // 封装一个方法，用来请求设计师列表
    async getDesignerList(per_page, page, name) {
      try {
        let res = await api.designerListApi(per_page, page, name)
        // console.log(res);
        res.data.data.data.forEach(item => {
          item.btnActive = false
        });
        this.designersListArr = res.data.data.data
        console.log(this.designersListArr, 'designerListArr')


      } catch (e) {
        console.log(e)
      }

    },
    // 关注/取消关注
    async isFocusApi(id) {
      try {
        let res = await api.focusApi(id)
        console.log(res);
        // console.log(res, '关注');
      } catch (e) {
        console.log(e);
      }
    },


    // 关注
    handleFocus(id) {
      console.log(id);
      const button = this.designersListArr.find(button => button.id === id)
      console.log(button);
      this.isFocus = !this.isFocus
      this.isFocusApi(id)
    },



    handlePush(id) {
      this.$router.push({
        path: '/designer',
        query: {
          id
        }
      })
    },
    // handleClick(id) {
    //   console.log(id);
    //   this.$router.push({
    //     path: '/designerdetails',
    //     query: {
    //       id
    //     }
    //   })
    // },
  }
}
</script>


<style scoped lang="less">
.seemore {
  text-decoration: none;
  cursor: pointer;

}

.storp-a {
  text-decoration: none;
  cursor: pointer;
}
</style>
